<template>
  <!-- 搜索联想 -->
  <div class="searchxiang-continer">
    <van-cell
      v-for="(item, index) in getList"
      :key="index"
      :title="item"
      icon="search"
      @click="queding(item)"
    >
      <div slot="title" v-html="isActive(item)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchXianng } from "@/api/search.js";
import { debounce } from "lodash";
export default {
  data() {
    return {
      getList: [],
    };
  },
  props: ["selectVal"],
  watch: {
    selectVal: {
      //debounce 三方插件 防抖，
      // 参数1 调用的函数
      // 参数2 间隔的时间
      // 返回值 防抖的函数，要执行的函数
      handler: debounce(function (val) {
        this.updataWatch(val);
      }, 500),
      immediate: true,
    },
  },
  methods: {
    // input 框变化 请求联想
    async updataWatch(val) {
      try {
        const { data: res } = await getSearchXianng(val);
        this.getList = res.data.options;
      } catch (err) {
        console.log(err);
      }
    },
    // 搜索的关键字高亮
    isActive(val) {
      var regexp = new RegExp(this.selectVal, "gi");
      return val.replace(
        regexp,
        `<span class="active">${this.selectVal}</span>`
      );
    },
    //点击现象搜索
    queding(val) {
      this.$emit("queding", val);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .active {
  color: #3296fa;
}
</style>